<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动布局练习</title>

  <style>
    * {
      margin: 0;
      padding: 0;

    }

    .leftfix {
      float: left;
    }

    .rightfix {
      float: right;
    }

    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .container {
      width: 960px;
      margin: 0 auto;
      text-align: center;
    }

    .log, .banner1, .banner2 {
      line-height: 80px;
      height: 80px;
      background-color: skyblue;
    }

    .log {
      width: 200px;

    }

    .banner1 {
      width: 540px;

      margin: 0 10px;
    }

    .banner2 {
      width: 200px;


    }

    .menu {
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: #888888;
      margin: 10px 0;
    }


    .content {
      width: 100%;
      height: 410px;

    }


    .footer {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #cccccc;
      margin-top: 10px;
    }

    .content-left{
      width: 750px;
    }

    .content-right{
      width: 200px;
      margin-left:10px;
    }

    .right-d{
      height: 130px;
      line-height: 130px;
      width: 200px;
      background-color: darkcyan;
    }

    .right-d-2{
      margin: 10px 0;
    }

    .big{
      width: 370px;
      height: 200px;
      line-height: 150px;
      background-color: #7bff53;
      margin-bottom: 10px;
    }

    .min{
      height: 200px;
      line-height: 150px;
      width: 180px;
      background-color: darkgreen;
    }
  </style>
</head>
<body>
<div class="container">
  <!--头部-->
  <div class="page-head clearfix">
    <div class="log leftfix">log</div>
    <div class="banner1 leftfix">banner1</div>
    <div class="banner2 leftfix">banner2</div>
  </div>

  <!--菜单-->
  <div class="menu">菜单</div>

  <!--内容-->
  <div class="content clearfix">
    <div class="content-left leftfix">
      <div class="big leftfix">栏目1</div>
      <div class="big leftfix" style="margin-left: 10px">栏目2</div>
      <div class="min leftfix">栏目3</div>
      <div class="min leftfix" style="margin-left:10px">栏目4</div>
      <div class="min leftfix" style="margin-left:10px">栏目5</div>
      <div class="min leftfix" style="margin-left:10px">栏目6</div>

    </div>
    <div class="content-right leftfix">
      <div class="right-d">栏目7</div>
      <div class="right-d right-d-2">栏目8</div>
      <div class="right-d">栏目9</div>

    </div>
  </div>

  <!--页脚-->
  <div class="footer">页脚</div>
</div>
</body>
</html>
